{% extends 'base.html' %}
{% load static %}

{% block title %}全部对战历史 - Creeps Judge{% endblock %}

{% block extra_css %}
<style>


    .page-header {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(12px);
        color: white;
        padding: 15px 0;
        margin-bottom: 30px;
        text-align: center;
        border-bottom: 2px solid rgba(100, 150, 255, 0.4);
    }

    .page-header h1 {
        font-size: 2.5rem;
        background: linear-gradient(135deg, #00d4ff, #6496ff, #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1rem;
        text-shadow:
            0 0 20px rgba(100, 150, 255, 0.5),
            0 0 40px rgba(100, 150, 255, 0.3);
    }

    .stats-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: linear-gradient(135deg, rgba(45, 55, 85, 0.2) 0%, rgba(35, 45, 75, 0.3) 100%);
        backdrop-filter: blur(15px);
        border-radius: 15px;
        padding: 20px;
        text-align: center;
        border: 1px solid rgba(100, 150, 255, 0.3);
        color: white;
    }

    .stat-number {
        font-size: 2rem;
        font-weight: bold;
        color: #00d4ff;
        margin-bottom: 5px;
    }

    .stat-label {
        font-size: 0.9rem;
        opacity: 0.8;
    }

    .filter-container {
        background: linear-gradient(135deg, rgba(45, 55, 85, 0.2) 0%, rgba(35, 45, 75, 0.3) 100%);
        backdrop-filter: blur(15px);
        border-radius: 15px;
        padding: 25px;
        margin-bottom: 30px;
        border: 1px solid rgba(100, 150, 255, 0.3);
    }

    .filter-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
    }

    .form-group label {
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 5px;
        font-weight: 500;
    }

    .form-control {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(100, 150, 255, 0.3);
        border-radius: 8px;
        padding: 10px;
        color: white;
        font-size: 14px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .form-control:focus {
        outline: none;
        border-color: #00d4ff;
        box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
        background: rgba(255, 255, 255, 0.15);
        transform: scale(1.02);
    }

    .form-control:hover {
        border-color: rgba(100, 150, 255, 0.6);
        background: rgba(255, 255, 255, 0.12);
    }

    /* 输入框特殊样式 */
    input[type="date"].form-control,
    input[type="text"].form-control,
    select.form-control {
        position: relative;
        cursor: pointer;
        color-scheme: dark;
        color: rgba(240, 240, 240, 1) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        font-weight: 500;
    }

    input[type="date"].form-control::-webkit-calendar-picker-indicator {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2300d4ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>') no-repeat;
        background-size: 16px 16px;
        cursor: pointer;
        opacity: 0.8;
        transition: all 0.3s ease;
        filter: brightness(1.2);
    }

    /* 下拉选择框箭头样式 */
    select.form-control {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2300d4ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 12px;
        padding-right: 30px;
    }

    input[type="date"].form-control::-webkit-calendar-picker-indicator:hover {
        opacity: 1;
        transform: scale(1.1);
        filter: brightness(1.5) drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
    }

    input[type="date"].form-control:focus::-webkit-calendar-picker-indicator {
        filter: brightness(1.5) drop-shadow(0 0 8px rgba(0, 212, 255, 0.8));
    }

    /* Firefox 日期选择器样式 */
    input[type="date"].form-control::-moz-focus-inner {
        border: 0;
    }

    /* 日期选择器弹出框样式增强 */
    input[type="date"].form-control::-webkit-datetime-edit {
        color: white !important;
        background: transparent !important;
        padding: 2px;
    }

    input[type="date"].form-control::-webkit-datetime-edit-fields-wrapper {
        background: transparent !important;
    }

    input[type="date"].form-control::-webkit-datetime-edit-text {
        color: rgba(255, 255, 255, 0.7) !important;
        background: transparent !important;
        padding: 0 2px;
    }

    input[type="date"].form-control::-webkit-datetime-edit-month-field,
    input[type="date"].form-control::-webkit-datetime-edit-day-field,
    input[type="date"].form-control::-webkit-datetime-edit-year-field {
        color: white !important;
        background: transparent !important;
        border: none;
        padding: 2px;
    }

    input[type="date"].form-control::-webkit-datetime-edit-month-field:focus,
    input[type="date"].form-control::-webkit-datetime-edit-day-field:focus,
    input[type="date"].form-control::-webkit-datetime-edit-year-field:focus {
        background: rgba(0, 212, 255, 0.2) !important;
        border-radius: 3px;
        outline: none;
        color: white !important;
    }

    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        transition: all 0.3s ease;
    }

    .button-group {
        display: flex;
        gap: 15px;
        align-items: center;
        margin-top: 5px;
    }

    .btn-primary {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(100, 150, 255, 0.2));
        color: #00d4ff;
        border: 1px solid rgba(0, 212, 255, 0.5);
        min-width: 100px;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.375rem;
        font-weight: 600;
        white-space: nowrap;
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #00d4ff, #6496ff);
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5), 0 0 15px rgba(0, 212, 255, 0.3);
        border-color: #00d4ff;
        color: #ffffff;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
        transition: all 0.3s ease;
    }

    .btn-secondary {
        background: linear-gradient(135deg, rgba(255, 140, 0, 0.3), rgba(255, 165, 0, 0.3));
        color: #ff9f30;
        border: 1px solid rgba(255, 140, 0, 0.6);
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.375rem;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        min-width: 100px;
        font-weight: 600;
        white-space: nowrap;
        transition: all 0.3s ease;
    }

    .btn-secondary:hover {
        background: linear-gradient(135deg, #ff8c00, #ffa500);
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 8px 25px rgba(255, 140, 0, 0.6), 0 0 15px rgba(255, 140, 0, 0.4);
        border-color: #ff8c00;
        color: #ffffff;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
        transition: all 0.3s ease;
    }

    .battle-card {
        background: linear-gradient(135deg, rgba(20, 30, 60, 0.7) 0%, rgba(15, 20, 45, 0.8) 100%);
        backdrop-filter: blur(15px);
        border-radius: 20px;
        padding: 25px;
        margin-bottom: 20px;
        border: 1px solid rgba(100, 150, 255, 0.3);
        transition: all 0.3s ease;
        color: white;
        position: relative;
    }

    .self-battle-tag {
        background: linear-gradient(45deg, #9c27b0, #673ab7);
        color: white;
        border: 1px solid rgba(156, 39, 176, 0.6);
        padding: 2px 6px;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: bold;
        text-transform: capitalize;
        letter-spacing: 0.5px;
        margin-left: 5px;
        display: inline-block;
        box-shadow: 0 0 10px rgba(156, 39, 176, 0.3);
        transition: all 0.3s ease;
    }

    .exciting-battle-tag {
        background: linear-gradient(45deg, #ffd700, #ffed4e);
        color: #8b6914;
        border: 1px solid #e6c200;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: bold;
        margin-left: 10px;
        display: inline-block;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
        transition: all 0.3s ease;
        animation: excitingGlow 3s ease-in-out infinite;
    }

    @keyframes excitingGlow {
        0% {
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
            transform: scale(1);
        }
        50% {
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 0 35px rgba(255, 215, 0, 0.3);
            transform: scale(1.05);
        }
        100% {
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
            transform: scale(1);
        }
    }

    .exciting-battle-tag i {
        margin-right: 4px;
        animation: starTwinkle 2s ease-in-out infinite;
    }

    @keyframes starTwinkle {
        0%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.7;
            transform: scale(1.2);
        }
    }

    /* 获胜者皇冠样式 */
    .winner-crown {
        color: #ffd700;
        margin-right: 5px;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
        animation: crownGlow 2.5s ease-in-out infinite;
        filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8));
        transform-origin: center;
    }

    @keyframes crownGlow {
        0% {
            text-shadow: 0 0 3px rgba(255, 215, 0, 0.3);
            transform: scale(0.8);
        }
        50% {
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.4);
            transform: scale(1.2);
        }
        100% {
            text-shadow: 0 0 3px rgba(255, 215, 0, 0.3);
            transform: scale(0.9);
        }
    }

    .battle-card:hover .winner-crown {
        animation-duration: 1s;
        text-shadow: 0 0 25px rgba(255, 215, 0, 1), 0 0 35px rgba(255, 215, 0, 0.7);
    }

    /* 玩家名字颜色 */
        .player1-name {
            color: #dc3545 !important; /* 红色 */
            font-weight: 600;
        }

        .player2-name {
            color: #007bff !important; /* 蓝色 */
            font-weight: 600;
        }

        /* 对战类型标签样式 */
        .battle-type-tag {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-right: 8px;
        }

        .battle-type-ranked {
            background: linear-gradient(135deg, #ffd700, #ffed4e);
            color: #8b6914;
            border: 1px solid #e6c200;
            box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
        }

        .battle-type-practice {
            background: linear-gradient(135deg, #28a745, #34ce57);
            color: #ffffff;
            border: 1px solid #1e7e34;
            box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
        }



    .self-battle-tag:hover {
        transform: translateY(-1px) scale(1.05);
        box-shadow: 0 2px 8px rgba(156, 39, 176, 0.4);
    }

    .exciting-battle-tag:hover {
        transform: translateY(-1px) scale(1.05);
        box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
        animation-duration: 1s;
    }

    .battle-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 15px 40px rgba(0, 212, 255, 0.3), 0 0 20px rgba(100, 150, 255, 0.2);
        border-color: rgba(100, 150, 255, 0.8);
        background: linear-gradient(135deg, rgba(20, 30, 55, 0.8) 0%, rgba(10, 15, 40, 0.9) 100%);
    }

    .battle-card:hover .battle-id {
        color: #00f0ff;
        text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
    }

    .battle-card:hover .battle-card .player-name {
        color: #00d4ff;
        text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
    }

    .battle-card:hover .vs-divider {
        color: #00d4ff;
        text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
        transform: scale(1.1);
    }

    /* 错误状态的对战卡片样式 - 低调版本 */
    .battle-card.error-battle {
        background: linear-gradient(135deg, rgba(40, 40, 40, 0.85) 0%, rgba(50, 45, 45, 0.9) 100%);
        border: 1px solid rgba(150, 150, 150, 0.3);
        opacity: 0.7;
    }

    .battle-card.error-battle:hover {
        transform: translateY(-2px);
        opacity: 0.85;
    }

    /* 错误对战的玩家名称样式 - 低调版本 */
    .battle-card.error-battle .battle-card .player-name {
        color: #cccccc;
        opacity: 0.8;
    }

    /* 错误对战的ID样式 - 低调版本 */
    .battle-card.error-battle .battle-id {
        color: #aaaaaa;
        opacity: 0.8;
    }

    .battle-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .battle-id {
        font-size: 1.2rem;
        font-weight: bold;
        color: #00d4ff;
    }

    .battle-status {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .status-finished {
        background: rgba(40, 167, 69, 0.2);
        color: #28a745;
        border: 1px solid rgba(40, 167, 69, 0.5);
    }

    .status-running {
        background: rgba(255, 193, 7, 0.2);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.5);
    }

    .status-pending {
        background: rgba(108, 117, 125, 0.2);
        color: #6c757d;
        border: 1px solid rgba(108, 117, 125, 0.5);
    }

    .status-error {
        background: rgba(120, 120, 120, 0.2);
        color: #999999;
        border: 1px solid rgba(120, 120, 120, 0.4);
        opacity: 0.7;
    }

    .battle-players {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 30px;
        align-items: center;
        margin-bottom: 15px;
    }

    .player {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .battle-card .player-info {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .battle-card .player-info.left {
        flex-direction: row;
        justify-content: center;
    }

    .battle-card .player-info.right {
        flex-direction: row;
        justify-content: center;
    }

    .player-details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .battle-card .player-info.left .player-details {
        align-items: flex-start;
    }

    .battle-card .player-info.right .player-details {
        align-items: flex-start;
    }

    .battle-card .player-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 2px solid rgba(100, 150, 255, 0.5);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(30, 30, 60, 0.9));
    }

    .battle-card .player-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .battle-card .default-avatar {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: bold;
        color: #00d4ff;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(100, 150, 255, 0.2));
    }

    .battle-card .player-name {
        font-size: 1.1rem;
        font-weight: 600;
        color: #00d4ff;
        margin-bottom: 5px;
    }

    .player-code {
        font-size: 0.9rem;
        opacity: 0.7;
    }

    /* 基地血量条样式 */
    .base-health-bar {
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.9);
    }

    .health-bar-container {
        width: 80px;
        height: 10px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        position: relative;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .health-bar-fill {
        height: 100%;
        background: #dc3545;
        border-radius: 4px;
        transition: all 0.5s ease;
        min-width: 2px;
        position: relative;
        box-shadow: 0 0 8px rgba(220, 53, 69, 0.4);
    }

    .health-bar-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 255, 255, 0.3) 50%, 
            transparent 100%
        );
        animation: healthBarShine 2s ease-in-out infinite;
    }

    @keyframes healthBarShine {
        0% {
            transform: translateX(-100%);
        }
        50% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(100%);
        }
    }

    .health-text {
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        white-space: nowrap;
    }

    /* 血量条悬停效果 */
    .battle-card:hover .health-bar-fill {
        box-shadow: 0 0 15px rgba(220, 53, 69, 0.6);
        transform: scaleY(1.1);
    }

    .battle-card:hover .health-bar-fill::after {
        animation-duration: 1s;
    }

    /* 击杀数统计样式 */
    .kill-stats {
        margin-top: 6px;
        display: flex;
        gap: 12px;
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.8);
    }

    .kill-count, .death-count {
        display: flex;
        align-items: center;
        padding: 2px 6px;
        border-radius: 8px;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        transition: all 0.3s ease;
    }

    .kill-count {
        background: rgba(40, 167, 69, 0.2);
        border: 1px solid rgba(40, 167, 69, 0.4);
        color: #4ade80;
    }

    .death-count {
        background: rgba(220, 53, 69, 0.2);
        border: 1px solid rgba(220, 53, 69, 0.4);
        color: #f87171;
    }

    .battle-card:hover .kill-count {
        background: rgba(40, 167, 69, 0.3);
        border-color: rgba(40, 167, 69, 0.6);
        box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
    }

    .battle-card:hover .death-count {
        background: rgba(220, 53, 69, 0.3);
        border-color: rgba(220, 53, 69, 0.6);
        box-shadow: 0 0 8px rgba(220, 53, 69, 0.3);
    }

    .vs-divider {
        font-size: 1.5rem;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    /* VS行中的地图信息样式 */
    .vs-map-info {
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.15), rgba(0, 212, 255, 0.15));
        border: 1px solid rgba(100, 150, 255, 0.3);
        transition: all 0.3s ease;
        text-transform: capitalize;
        letter-spacing: 0.3px;
    }

    .battle-card:hover .vs-map-info {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.25), rgba(0, 212, 255, 0.25));
        border-color: rgba(100, 150, 255, 0.5);
        box-shadow: 0 0 8px rgba(100, 150, 255, 0.3);
        transform: scale(1.05);
        color: rgba(255, 255, 255, 0.95);
    }

    .vs-map-info i {
        color: #00d4ff;
        text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
        font-size: 0.8em;
    }

    .battle-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        margin-bottom: 15px;
    }

    .info-item {
        text-align: center;
    }

    .info-label {
        font-size: 0.8rem;
        opacity: 0.7;
        margin-bottom: 3px;
    }

    .info-value {
        font-size: 0.9rem;
        font-weight: 500;
    }

    .battle-result {
        text-align: center;
        margin-bottom: 15px;
    }

    .result-text {
        font-size: 1rem;
        font-weight: 600;
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-block;
    }

    .result-player1-win {
        background: rgba(40, 167, 69, 0.2);
        color: #28a745;
        border: 1px solid rgba(40, 167, 69, 0.5);
    }

    .result-player2-win {
        background: rgba(40, 167, 69, 0.2);
        color: #28a745;
        border: 1px solid rgba(40, 167, 69, 0.5);
    }

    .result-draw {
        background: rgba(255, 193, 7, 0.2);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.5);
    }

    .result-error {
        background: rgba(120, 120, 120, 0.2);
        color: #999999;
        border: 1px solid rgba(120, 120, 120, 0.4);
        opacity: 0.7;
    }

    .battle-actions {
        text-align: center;
        margin-top: 10px;
    }

    .battle-actions .btn {
        min-width: 120px;
        white-space: nowrap;
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 30px;
    }

    .pagination a, .pagination span {
        padding: 8px 12px;
        border-radius: 8px;
        text-decoration: none;
        color: white;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(100, 150, 255, 0.3);
    }

    .pagination .current {
        background: linear-gradient(135deg, #00d4ff, #6496ff);
        border-color: #00d4ff;
    }

    .pagination a:hover {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(100, 150, 255, 0.3));
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
        border-color: rgba(0, 212, 255, 0.6);
        color: #00d4ff;
        text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
    }

    /* 回到顶部按钮样式 */
    .back-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #00d4ff, #6496ff);
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-size: 1.2rem;
        box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
        transition: all 0.3s ease;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        z-index: 1000;
    }

    .back-to-top.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .back-to-top:hover {
        background: linear-gradient(135deg, #6496ff, #00d4ff);
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 10px 30px rgba(0, 212, 255, 0.6), 0 0 20px rgba(0, 212, 255, 0.4);
        animation: backToTopPulse 1.5s ease-in-out infinite;
    }

    @keyframes backToTopPulse {
        0%, 100% {
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.6), 0 0 20px rgba(0, 212, 255, 0.4);
        }
        50% {
            box-shadow: 0 15px 40px rgba(0, 212, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.6);
        }
    }

    .back-to-top:active {
        transform: translateY(-1px);
    }

    /* 管理员操作样式 */
    .admin-panel {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.2) 100%);
        backdrop-filter: blur(15px);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 30px;
        border: 1px solid rgba(220, 53, 69, 0.3);
        color: white;
    }

    .admin-panel h3 {
        color: #dc3545;
        margin-bottom: 15px;
        font-size: 1.2rem;
    }

    .admin-controls {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }

    .batch-controls {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba(220, 53, 69, 0.3);
    }

    .btn-danger {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.8), rgba(220, 53, 69, 0.9));
        color: white;
        border: 1px solid rgba(220, 53, 69, 0.6);
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        border-radius: 0.375rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-danger:hover {
        background: linear-gradient(135deg, #dc3545, #c82333);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
    }

    .btn-warning {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.8), rgba(255, 193, 7, 0.9));
        color: #212529;
        border: 1px solid rgba(255, 193, 7, 0.6);
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        border-radius: 0.375rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-warning:hover {
        background: linear-gradient(135deg, #ffc107, #e0a800);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
    }

    .btn-success {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.8), rgba(40, 167, 69, 0.9));
        color: white;
        border: 1px solid rgba(40, 167, 69, 0.6);
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        border-radius: 0.375rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        background: linear-gradient(135deg, #28a745, #218838);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
    }

    .battle-checkbox {
        margin-right: 10px;
        transform: scale(1.2);
    }

    .admin-actions {
        display: flex;
        gap: 5px;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .admin-actions .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        min-width: auto;
    }

    .select-all-checkbox {
        margin-right: 10px;
        transform: scale(1.3);
    }

    #selectedCount {
        color: #ffc107;
        font-weight: bold;
        margin-left: 10px;
    }

    /* 开关按钮样式 */
    .switch-label {
        cursor: pointer;
        display: block;
    }

    .switch-container {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 30px;
    }

    .switch-input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .switch-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(108, 117, 125, 0.3), rgba(108, 117, 125, 0.4));
        border: 1px solid rgba(108, 117, 125, 0.5);
        border-radius: 30px;
        transition: all 0.4s ease;
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.2),
            0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .switch-slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 3px;
        bottom: 3px;
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
        border-radius: 50%;
        transition: all 0.4s ease;
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.2),
            0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .switch-input:checked + .switch-slider {
        background: linear-gradient(135deg, #00d4ff, #6496ff);
        border-color: #00d4ff;
        box-shadow:
            inset 0 2px 4px rgba(0, 212, 255, 0.3),
            0 0 15px rgba(0, 212, 255, 0.4),
            0 2px 8px rgba(0, 212, 255, 0.2);
    }

    .switch-input:checked + .switch-slider:before {
        transform: translateX(30px);
        background: linear-gradient(135deg, #ffffff, #f0f8ff);
        box-shadow:
            0 2px 8px rgba(0, 212, 255, 0.3),
            0 1px 4px rgba(0, 0, 0, 0.1);
    }

    .switch-slider:hover {
        transform: scale(1.05);
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.2),
            0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .switch-input:checked + .switch-slider:hover {
        box-shadow:
            inset 0 2px 4px rgba(0, 212, 255, 0.3),
            0 0 20px rgba(0, 212, 255, 0.5),
            0 4px 12px rgba(0, 212, 255, 0.3);
    }

    .switch-input:focus + .switch-slider {
        outline: none;
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.2),
            0 0 0 3px rgba(0, 212, 255, 0.3);
    }

    .switch-input:checked:focus + .switch-slider {
        box-shadow:
            inset 0 2px 4px rgba(0, 212, 255, 0.3),
            0 0 15px rgba(0, 212, 255, 0.4),
            0 0 0 3px rgba(0, 212, 255, 0.5);
    }

    @media (max-width: 768px) {
        .back-to-top {
            bottom: 20px;
            right: 20px;
            width: 45px;
            height: 45px;
            font-size: 1rem;
        }

        .page-header h1 {
            font-size: 2rem;
        }

        .battle-players {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .vs-divider {
            order: -1;
        }

        .filter-row {
            grid-template-columns: 1fr;
        }

        /* 移动端血量条样式调整 */
        .base-health-bar {
            margin-top: 6px;
            gap: 6px;
            font-size: 0.7rem;
        }

        .health-bar-container {
            width: 60px;
            height: 8px;
        }

        .health-text {
            font-size: 0.65rem;
        }

        /* 移动端击杀数样式调整 */
        .kill-stats {
            margin-top: 4px;
            gap: 8px;
            font-size: 0.6rem;
        }

        .kill-count, .death-count {
            padding: 1px 4px;
            border-radius: 6px;
        }

        .battle-card .player-info {
            gap: 10px;
        }

        .battle-card .player-avatar {
            width: 50px;
            height: 50px;
        }

        .battle-card .player-name {
            font-size: 1rem;
        }

        .player-code {
            font-size: 0.8rem;
        }
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
// 日期选择器增强功能
document.addEventListener('DOMContentLoaded', function() {
    // 精彩战斗开关自动响应功能
    const excitingOnlySwitch = document.getElementById('exciting_only');
    if (excitingOnlySwitch) {
        excitingOnlySwitch.addEventListener('change', function() {
            // 自动提交表单，无需点击筛选按钮
            const form = this.closest('form');
            if (form) {
                form.submit();
            }
        });
    }

    // 获取所有日期输入框
    const dateInputs = document.querySelectorAll('input[type="date"]');

    dateInputs.forEach(function(input) {
        // 添加点击事件监听器
        input.addEventListener('click', function() {
            // 添加点击动画效果
            this.style.transform = 'scale(1.05)';
            this.style.boxShadow = '0 0 15px rgba(0, 212, 255, 0.5)';

            // 确保日历弹出
            setTimeout(() => {
                this.showPicker && this.showPicker();
            }, 50);

            // 恢复原始样式
            setTimeout(() => {
                this.style.transform = '';
                this.style.boxShadow = '';
            }, 200);
        });

        // 添加焦点事件
        input.addEventListener('focus', function() {
            this.style.borderColor = '#00d4ff';
            this.style.boxShadow = '0 0 10px rgba(0, 212, 255, 0.3)';
            this.style.background = 'rgba(255, 255, 255, 0.15)';
        });

        // 添加失焦事件
        input.addEventListener('blur', function() {
            this.style.borderColor = '';
            this.style.boxShadow = '';
            this.style.background = '';
        });

        // 添加键盘事件支持
        input.addEventListener('keydown', function(e) {
            // 按下回车键时打开日历
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.showPicker && this.showPicker();
            }
        });

        // 添加值变化事件
        input.addEventListener('change', function() {
            // 添加值变化时的视觉反馈
            this.style.borderColor = '#28a745';
            this.style.boxShadow = '0 0 10px rgba(40, 167, 69, 0.3)';

            setTimeout(() => {
                this.style.borderColor = '';
                this.style.boxShadow = '';
            }, 1000);
        });
    });

    // 为日期输入框添加占位符提示
    const dateFromInput = document.getElementById('date_from');
    const dateToInput = document.getElementById('date_to');

    if (dateFromInput && !dateFromInput.value) {
        dateFromInput.setAttribute('title', '点击选择开始日期');
    }

    if (dateToInput && !dateToInput.value) {
        dateToInput.setAttribute('title', '点击选择结束日期');
    }

    // 添加日期范围验证
    function validateDateRange() {
        const fromDate = dateFromInput ? new Date(dateFromInput.value) : null;
        const toDate = dateToInput ? new Date(dateToInput.value) : null;

        if (fromDate && toDate && fromDate > toDate) {
            // 如果开始日期大于结束日期，显示警告
            dateToInput.style.borderColor = '#dc3545';
            dateToInput.style.boxShadow = '0 0 10px rgba(220, 53, 69, 0.3)';
            dateToInput.setAttribute('title', '结束日期不能早于开始日期');

            setTimeout(() => {
                dateToInput.style.borderColor = '';
                dateToInput.style.boxShadow = '';
                dateToInput.setAttribute('title', '点击选择结束日期');
            }, 3000);
        }
    }

    if (dateFromInput) {
        dateFromInput.addEventListener('change', validateDateRange);
    }

    if (dateToInput) {
        dateToInput.addEventListener('change', validateDateRange);
    }
});
</script>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="container">
        <h1>全部对战历史</h1>
        <p>查看所有用户的对战记录和统计信息</p>
    </div>
</div>

<div class="container">
    <!-- 管理员操作面板 -->
    {% if user.is_staff %}
    <div class="admin-panel">
        <h3><i class="fas fa-cog"></i> 管理员操作</h3>
        <div class="admin-controls">
            <label>
                <input type="checkbox" id="selectAll" class="select-all-checkbox"> 全选
            </label>
            <span id="selectedCount">已选择: 0</span>
        </div>
        <div class="batch-controls">
            <button class="btn btn-danger" onclick="batchOperation('delete')">
                <i class="fas fa-trash"></i> 批量删除
            </button>
            <button class="btn btn-success" onclick="batchOperation('mark_exciting')">
                <i class="fas fa-star"></i> 批量标记精彩
            </button>
            <button class="btn btn-warning" onclick="batchOperation('unmark_exciting')">
                <i class="fas fa-star-half-alt"></i> 批量取消精彩
            </button>
        </div>
    </div>
    {% endif %}

    <!-- 统计信息 -->
    <div class="stats-container">
        <div class="stat-card">
            <div class="stat-number">{{ total_battles|default:0 }}</div>
            <div class="stat-label">总对战数</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ finished_battles|default:0 }}</div>
            <div class="stat-label">已完成</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ running_battles|default:0 }}</div>
            <div class="stat-label">进行中</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ pending_battles|default:0 }}</div>
            <div class="stat-label">等待中</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ error_battles|default:0 }}</div>
            <div class="stat-label">错误</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ exciting_battles|default:0 }}</div>
            <div class="stat-label">精彩战斗</div>
        </div>
    </div>

    <!-- 筛选器 -->
    <div class="filter-container">
        <form method="get">
            <div class="filter-row">
                <div class="form-group">
                    <label for="search">搜索用户</label>
                    <input type="text" id="search" name="search" class="form-control"
                           placeholder="输入用户名" value="{{ search_query }}" style="color: rgba(240, 240, 240, 1); font-weight: 500; letter-spacing: 0.02em;">
                </div>
                <div class="form-group">
                    <label for="battle_id">战斗ID</label>
                    <input type="text" id="battle_id" name="battle_id" class="form-control"
                           placeholder="输入战斗ID" value="{{ battle_id_filter }}" style="color: rgba(240, 240, 240, 1); font-weight: 500; letter-spacing: 0.02em;">
                </div>
                <div class="form-group">
                    <label for="status">对战状态</label>
                    <select id="status" name="status" class="form-control">
                        <option value="">全部状态</option>
                        {% for value, label in battle_status_choices %}
                            <option value="{{ value }}" {% if status_filter == value %}selected{% endif %}>
                                {{ label }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="battle_type">对战类型</label>
                    <select id="battle_type" name="battle_type" class="form-control">
                        <option value="">全部类型</option>
                        {% for value, label in battle_type_choices %}
                            <option value="{{ value }}" {% if battle_type_filter == value %}selected{% endif %}>
                                {{ label }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="exciting_only" class="switch-label">
                        <span style="color: #00d4ff; font-weight: 600; margin-bottom: 8px; display: block;">仅显示精彩战斗</span>
                        <div class="switch-container">
                            <input type="checkbox" id="exciting_only" name="exciting_only" value="1"
                                   {% if exciting_only %}checked{% endif %}
                                   class="switch-input">
                            <span class="switch-slider"></span>
                        </div>
                    </label>
                </div>
            </div>
            <div class="filter-row">
                <div class="form-group">
                    <label for="date_from">开始日期</label>
                    <input type="date" id="date_from" name="date_from" class="form-control"
                           value="{{ date_from }}">
                </div>
                <div class="form-group">
                    <label for="date_to">结束日期</label>
                    <input type="date" id="date_to" name="date_to" class="form-control"
                           value="{{ date_to }}">
                </div>
                <div class="form-group" style="align-self: end;">
                    <div class="button-group">
                        <button type="submit" class="btn btn-primary" style="min-width: 120px; box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);">筛选</button>
                        <a href="{% url 'battles:battles_history' %}" class="btn btn-secondary" style="min-width: 120px; box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4); background: linear-gradient(135deg, rgba(255, 140, 0, 0.5), rgba(255, 165, 0, 0.5)); color: #ffb700;">重置</a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- 对战列表 -->
    {% if page_obj %}
        {% for battle in page_obj %}
            <div class="battle-card{% if battle.status == 'error' or battle.result == 'error' %} error-battle{% endif %}">
                <div class="battle-header">
                    <div style="display: flex; align-items: center;">
                        {% if user.is_staff %}
                            <input type="checkbox" class="battle-checkbox" data-battle-id="{{ battle.id }}">
                        {% endif %}
                        <div class="battle-id">对战 #{{ battle.id }}</div>
                        {% if battle.is_exciting %}
                            <span class="exciting-battle-tag">
                                <i class="fas fa-star"></i> 精彩战斗
                            </span>
                        {% endif %}
                    </div>
                    <div class="battle-status status-{{ battle.status }}">
                        {{ battle.get_status_display }}
                    </div>
                </div>

                <div class="battle-players">
                    <div class="player">
                        <div class="player-info left">
                            <div class="player-avatar">
                                {% if battle.player1.profile.avatar %}
                                    <img src="{{ battle.player1.profile.avatar.url }}" alt="{{ battle.player1.username }}的头像">
                                {% else %}
                                    <div class="default-avatar">{{ battle.player1.username|first|upper }}</div>
                                {% endif %}
                            </div>
                            <div class="player-details">
                                <div class="player-name player1-name">
                                    {% if battle.status == 'finished' and battle.result == 'player1_win' %}
                                        <i class="fas fa-crown winner-crown"></i>
                                    {% endif %}
                                    {{ battle.player1.username }}
                                </div>
                                <div class="player-code">{{ battle.player1_code.title|default:"未知代码" }}</div>
                                {% if battle.player1_stats.baseHealth is not None %}
                                <div class="base-health-bar">
                                    <div class="health-bar-container">
                                        <div class="health-bar-fill" style="width: {{ battle.get_player1_base_health_percentage }}%"></div>
                                    </div>
                                    <span class="health-text">{{ battle.player1_stats.baseHealth|default:0 }}</span>
                                </div>
                                {% endif %}
                                {% if battle.player1_stats.stats %}
                                <div class="kill-stats">
                                    <span class="kill-count">击杀: {{ battle.player1_stats.stats.kills|default:0 }}</span>
                                    <span class="death-count">死亡: {{ battle.player1_stats.stats.deaths|default:0 }}</span>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="vs-divider">
                        VS
                        <div class="vs-map-info">
                            <i class="fas fa-map"></i>
                            <span>{{ battle.map_config.map|default:"main" }}</span>
                        </div>
                    </div>
                    <div class="player">
                        <div class="player-info right">
                            <div class="player-details">
                                <div class="player-name player2-name">
                                    {% if battle.status == 'finished' and battle.result == 'player2_win' %}
                                        <i class="fas fa-crown winner-crown"></i>
                                    {% endif %}
                                    {{ battle.player2.username }}
                                </div>
                                <div class="player-code">{{ battle.player2_code.title|default:"未知代码" }}</div>
                                {% if battle.player2_stats.baseHealth is not None %}
                                <div class="base-health-bar">
                                    <div class="health-bar-container">
                                        <div class="health-bar-fill" style="width: {{ battle.get_player2_base_health_percentage }}%"></div>
                                    </div>
                                    <span class="health-text">{{ battle.player2_stats.baseHealth|default:0 }}</span>
                                </div>
                                {% endif %}
                                {% if battle.player2_stats.stats %}
                                <div class="kill-stats">
                                    <span class="kill-count">击杀: {{ battle.player2_stats.stats.kills|default:0 }}</span>
                                    <span class="death-count">死亡: {{ battle.player2_stats.stats.deaths|default:0 }}</span>
                                </div>
                                {% endif %}
                            </div>
                            <div class="player-avatar">
                                {% if battle.player2.profile.avatar %}
                                    <img src="{{ battle.player2.profile.avatar.url }}" alt="{{ battle.player2.username }}的头像">
                                {% else %}
                                    <div class="default-avatar">{{ battle.player2.username|first|upper }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                {% if battle.result %}
                    <div class="battle-result">
                        <span class="result-text result-{{ battle.result }}">
                            {% if battle.result == 'player1_win' %}
                                <span class="player1-name">{{ battle.player1.username }}</span> 获胜
                            {% elif battle.result == 'player2_win' %}
                                <span class="player2-name">{{ battle.player2.username }}</span> 获胜
                            {% elif battle.result == 'draw' %}
                                平局
                            {% elif battle.result == 'error' %}
                                错误
                            {% endif %}
                        </span>
                    </div>
                {% endif %}

                <div class="battle-info">
                    <div class="info-item">
                        <div class="info-label">对战类型</div>
                        <div class="info-value">
                            <span class="battle-type-tag battle-type-{{ battle.battle_type }}">{{ battle.get_battle_type_display }}</span>
                            {% if battle.player1 == battle.player2 %}
                                <span class="self-battle-tag">自我对战</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">创建时间</div>
                        <div class="info-value">{{ battle.created_at|date:"Y-m-d H:i" }}</div>
                    </div>
                    {% if battle.finished_at %}
                        <div class="info-item">
                            <div class="info-label">完成时间</div>
                            <div class="info-value">{{ battle.finished_at|date:"Y-m-d H:i" }}</div>
                        </div>
                    {% endif %}
                    {% if battle.total_rounds %}
                        <div class="info-item">
                            <div class="info-label">总回合数</div>
                            <div class="info-value">{{ battle.total_rounds }}</div>
                        </div>
                    {% endif %}
                </div>

                <div class="battle-actions">
                    <a href="{% url 'battles:battle_detail' battle.id %}" class="btn btn-primary" style="min-width: 120px; box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);">
                        查看详情
                    </a>

                    {% if user.is_staff %}
                    <div class="admin-actions">
                        <button class="btn btn-danger" onclick="deleteBattle({{ battle.id }})">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                        {% if battle.is_exciting %}
                            <button class="btn btn-warning" onclick="unmarkExciting({{ battle.id }})">
                                <i class="fas fa-star-half-alt"></i> 取消精彩
                            </button>
                        {% else %}
                            <button class="btn btn-success" onclick="markExciting({{ battle.id }})">
                                <i class="fas fa-star"></i> 标记精彩
                            </button>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        {% endfor %}

        <!-- 分页 -->
        {% if page_obj.has_other_pages %}
            <div class="pagination">
                {% if page_obj.has_previous %}
                    <a href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.battle_type %}&battle_type={{ request.GET.battle_type }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}">&laquo; 首页</a>
                    <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.battle_type %}&battle_type={{ request.GET.battle_type }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}">&lsaquo; 上一页</a>
                {% endif %}

                <span class="current">
                    第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页
                </span>

                {% if page_obj.has_next %}
                    <a href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.battle_type %}&battle_type={{ request.GET.battle_type }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}">下一页 &rsaquo;</a>
                    <a href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}{% if request.GET.battle_type %}&battle_type={{ request.GET.battle_type }}{% endif %}{% if request.GET.date_from %}&date_from={{ request.GET.date_from }}{% endif %}{% if request.GET.date_to %}&date_to={{ request.GET.date_to }}{% endif %}">末页 &raquo;</a>
                {% endif %}
            </div>
        {% endif %}
    {% else %}
        <div class="battle-card" style="text-align: center; padding: 50px;">
            <h3 style="color: rgba(255, 255, 255, 0.7); margin-bottom: 20px;">暂无对战记录</h3>
            <p style="color: rgba(255, 255, 255, 0.5); margin-bottom: 25px;">当前筛选条件下没有找到对战记录</p>
            <div style="display: flex; justify-content: center;">
                <a href="{% url 'battles:battles_history' %}" class="btn btn-primary" style="min-width: 120px;">查看全部</a>
            </div>
        </div>
    {% endif %}
</div>

<!-- 回到顶部按钮 -->
<button id="backToTop" class="back-to-top" onclick="scrollToTop()">
    <i class="fas fa-chevron-up"></i>
</button>

<script>
// 回到顶部功能
function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}

// 监听滚动事件，控制按钮显示/隐藏
window.addEventListener('scroll', function() {
    const backToTopButton = document.getElementById('backToTop');
    if (window.pageYOffset > 300) {
        backToTopButton.classList.add('show');
    } else {
        backToTopButton.classList.remove('show');
    }
});

// 管理员操作相关JavaScript
{% if user.is_staff %}
// 全选/取消全选
document.getElementById('selectAll').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.battle-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
    updateSelectedCount();
});

// 更新选中数量
function updateSelectedCount() {
    const selectedCheckboxes = document.querySelectorAll('.battle-checkbox:checked');
    document.getElementById('selectedCount').textContent = `已选择: ${selectedCheckboxes.length}`;
}

// 监听单个复选框变化
document.addEventListener('change', function(e) {
    if (e.target.classList.contains('battle-checkbox')) {
        updateSelectedCount();

        // 检查是否所有复选框都被选中
        const allCheckboxes = document.querySelectorAll('.battle-checkbox');
        const checkedCheckboxes = document.querySelectorAll('.battle-checkbox:checked');
        document.getElementById('selectAll').checked = allCheckboxes.length === checkedCheckboxes.length;
    }
});

// 删除单个战斗
function deleteBattle(battleId) {
    if (!confirm('确定要删除这场战斗吗？此操作不可撤销。')) {
        return;
    }

    fetch(`/battles/api/admin/${battleId}/delete/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken'),
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            alert(data.message);
            location.reload();
        } else {
            alert('操作失败: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('操作失败，请重试');
    });
}

// 标记精彩战斗
function markExciting(battleId) {
    fetch(`/battles/api/admin/${battleId}/mark-exciting/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken'),
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            alert(data.message);
            location.reload();
        } else {
            alert('操作失败: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('操作失败，请重试');
    });
}

// 取消精彩战斗标记
function unmarkExciting(battleId) {
    fetch(`/battles/api/admin/${battleId}/unmark-exciting/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken'),
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            alert(data.message);
            location.reload();
        } else {
            alert('操作失败: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('操作失败，请重试');
    });
}

// 批量操作
function batchOperation(operation) {
    const selectedCheckboxes = document.querySelectorAll('.battle-checkbox:checked');
    if (selectedCheckboxes.length === 0) {
        alert('请先选择要操作的战斗');
        return;
    }

    const battleIds = Array.from(selectedCheckboxes).map(cb => parseInt(cb.dataset.battleId));

    let confirmMessage = '';
    switch (operation) {
        case 'delete':
            confirmMessage = `确定要删除选中的 ${battleIds.length} 场战斗吗？此操作不可撤销。`;
            break;
        case 'mark_exciting':
            confirmMessage = `确定要将选中的 ${battleIds.length} 场战斗标记为精彩吗？`;
            break;
        case 'unmark_exciting':
            confirmMessage = `确定要取消选中的 ${battleIds.length} 场战斗的精彩标记吗？`;
            break;
    }

    if (!confirm(confirmMessage)) {
        return;
    }

    fetch('/battles/api/admin/batch-operation/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken'),
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            battle_ids: battleIds,
            operation: operation
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            alert(data.message);
            location.reload();
        } else {
            alert('操作失败: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('操作失败，请重试');
    });
}

// 获取CSRF Token
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
{% endif %}
</script>

{% endblock %}